<!-- 设备类型下拉框 -->
<template>
  <px-form-item label="设备类型" prop="typeId" :rules="{ required: props.isRequired, message: '设备类型不能为空', trigger: ['blur', 'change'] }">
    <px-select-v2
      style="width: 100%"
      v-model="typeVal"
      placeholder="请选择设备类型"
      clearable
      filterable
      :disabled="props.isDisabled"
      :options="typeList"
      @focus="focusType"
      @change="changeType"
    />
  </px-form-item>
</template>

<script setup lang="ts">
import { queryEquipTypeSelect } from "@/api/common";
import { ref, watch } from "vue";

// 父级方法和值
const emits = defineEmits(["changeType"]);
const props = defineProps(["className", "systemCodes", "categoryId", "typeId", "isRequired", "isDisabled"]);

const typeVal = ref(null);
const typeList = ref([]);

watch(
  () => props.typeId,
  val => {
    typeVal.value = props.typeId;
    if (val) {
      setTimeout(() => {
        focusType();
      }, 0);
    }
  },
  { immediate: true }
);
// 获取设备类型下拉列表
const focusType = async () => {
  const tempTypeList = await queryEquipTypeSelect({
    className: props.className,
    systemCodes: props.systemCodes,
    categoryId: props.categoryId
  });
  typeList.value = tempTypeList?.map(item => ({ label: item.name, value: item.id, categoryId: item.categoryId })) || [];
};
// 改变设备类型值，传值给父级并做改变
const changeType = () => {
  const arr = typeList.value?.filter(item => {
    return item.value === typeVal.value;
  });
  const categoryId = arr[0].categoryId;
  emits("changeType", typeVal.value, categoryId);
};
</script>
<style lang="scss" scoped>
:deep(.px-select-v2) {
  .is-disabled {
    .px-select-v2__placeholder {
      color: rgba(0, 0, 0, 0.3);
    }
  }
}
</style>
